<template>
  <div class="wrapper">
    <div class="main">
      <div class="search-bar">
        <el-input v-if="!isTime" v-model="searchPost.warehousingPlanId" placeholder="请输入单据编号" style="width: 220px; margin-right: 20px;"></el-input>
        <el-date-picker type="date" placeholder="请选择申请起始日期" v-model="searchPost.startTime" value-format="yyyy-MM-dd"></el-date-picker>
        <span style="margin: 0 10px;line-height: 36px;">—</span>
        <el-date-picker type="date" placeholder="请选择申请截止日期" v-model="searchPost.endTime" value-format="yyyy-MM-dd"></el-date-picker>
        <div class="btn-group">
          <el-button type="primary" size="mini" @click="getWarehousingList(true)">查询</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :height="tableHeight+'px'" :data="tableData" border style="width: 100%">
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">{{scope.$index+1}}</template>
          </el-table-column>
          <!-- 计件 -->
          <el-table-column prop="warehousingBoxNumber" label="分箱号" align="center" min-width="100" v-if="!isTime"></el-table-column>
          <el-table-column prop="warehousingPlanId" label="单据编号" align="center" min-width="120" v-if="!isTime"></el-table-column>
          <el-table-column prop="warehousingProductId" label="产品编号" align="center" min-width="180" v-if="!isTime"></el-table-column>
          <el-table-column prop="warehousingProductName" label="产品名称" align="center" min-width="180" v-if="!isTime"></el-table-column>
          <el-table-column prop="warehousingNumber" label="计划入库数量" align="center" min-width="120" v-if="!isTime"></el-table-column>
          <el-table-column prop="warehousingRealNumber" label="实际入库数量" align="center" min-width="120" v-if="!isTime"></el-table-column>
          <el-table-column prop="warehousingCreatorName" label="发起人" align="center" min-width="100" v-if="!isTime"></el-table-column>
          <el-table-column prop="warehousingModifyTime" label="操作日期" align="center" min-width="100" v-if="!isTime"></el-table-column>
          <el-table-column label="单据状态" align="center" min-width="100" v-if="!isTime">
            <template slot-scope="scope">
              <span>{{warehousingStatus[Number(scope.row.warehousingStatus)]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前处理人" align="center" min-width="100" v-if="!isTime">
            <template slot-scope="scope">
              <span>{{(scope.row.warehousingStatus === '0' || scope.row.warehousingStatus === '') ? '' : scope.row.warehousingStatus === '1' ? scope.row.warehousingQualityAuditName : scope.row.warehousingStatus === '2' ? scope.row.warehousingSignForName : scope.row.warehousingStatus === '3' ? scope.row.warehousingInputName : ''}}</span>
            </template>
          </el-table-column>
          <!-- 计时 -->
          <div v-if="isTime">
            <el-table-column prop="subsidyParticipantName" label="参与人员" align="center" min-width="200"></el-table-column>
            <el-table-column prop="subsidyStaffNumber" label="计时人数" align="center" min-width="100"></el-table-column>
            <el-table-column prop="subsidyContent" label="工作内容" align="center" min-width="120"></el-table-column>
            <el-table-column prop="subsidyTimeDescription" label="时间说明" align="center" min-width="100"></el-table-column>
            <el-table-column prop="subsidyPensonType" label="补贴对象" align="center" min-width="100"></el-table-column>
            <el-table-column prop="subsidyTotalRealTime" label="实际补贴时间" align="center" min-width="120"></el-table-column>
            <el-table-column prop="subsidyStandard" label="补贴标准" align="center" min-width="100"></el-table-column>
            <el-table-column prop="subsidyFee" label="补贴费用" align="center" min-width="100"></el-table-column>
            <el-table-column prop="subsidyCreatorName" label="申请人" align="center" min-width="100"></el-table-column>
            <el-table-column prop="subsidyDepartmentPrincipalName" align="center" label="部门主管" min-width="100"></el-table-column>
            <el-table-column prop="subsidyCenterPrincipalName" align="center" label="上级部门负责人" min-width="130"></el-table-column>
            <el-table-column prop="subsidySalarySpecialistName" align="center" label="薪酬专员" min-width="100"></el-table-column>
            <el-table-column prop="subsidyCcName" label="抄送人员" align="center" min-width="100"></el-table-column>
            <el-table-column label="审核状态" align="center" min-width="160">
              <template slot-scope="scope">
                <span>{{subsidyStatus[Number(scope.row.subsidyStatus)-1]}}</span>
              </template>
            </el-table-column>
          </div>
          <el-table-column label="操作" align="center" min-width="180">
            <template slot-scope="scope">
              <el-button @click.native.prevent="openEditDialog(scope.row.id, 'edit')" type="text" size="small" v-if="(!scope.row.warehousingCreatorId || (scope.row.warehousingCreatorId && scope.row.warehousingCreatorId === userInfo.dingId)) && (scope.row.warehousingStatus==='0' || scope.row.warehousingStatus==='')">计件单确认</el-button>
              <el-button @click.native.prevent="openEditDialog(scope.row.id, 'edit')" type="text" size="small" v-if="scope.row.canModifyData==='1' && scope.row.warehousingStatus==='1'">编辑</el-button>
              <el-button @click.native.prevent="openEditDialog(scope.row.id, 'check')" type="text" size="small" v-if="!isTime && ((scope.row.warehousingStatus==='1' && userInfo.dingId===scope.row.warehousingQualityAuditId) || (scope.row.warehousingStatus==='2' && userInfo.dingId===scope.row.warehousingSignForId) || (scope.row.warehousingStatus==='3' && userInfo.dingId===scope.row.warehousingInputId))">审核</el-button>
              <el-button @click.native.prevent="openEditDialog(scope.row.id, 'check')" type="text" size="small" v-if="isTime && ((scope.row.subsidyStatus==='1' && userInfo.dingId===scope.row.subsidyDepartmentPrincipalId) || (scope.row.subsidyStatus==='2' && userInfo.dingId===scope.row.subsidyCenterPrincipalId) || (scope.row.subsidyStatus==='3' && userInfo.dingId===scope.row.subsidySalarySpecialistId))">审核</el-button>
              <el-button @click.native.prevent="openEditDialog(scope.row.id, 'view')" type="text" size="small">查看</el-button>
              <el-button @click.native.prevent="delData(scope.row.id)" type="text" size="small" v-if="scope.row.canDeleteData==='1'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom">
        <div class="btn-wrapper">
          <el-button type="primary" size="mini" @click="openEditDialog(false)" :disabled="!hasAddAuthority">新增</el-button>
          <el-button type="primary" size="mini" @click="exportData">导出{{isTime ? '计时' : '计件'}}入库模块数据</el-button>
        </div>
        <el-pagination background layout="prev, pager, next" :total="pageConfig.totalCount" :page-size="pageConfig.pageSize" :current-page.sync="pageConfig.pageIndex" @current-change="currentChangeHandle"></el-pagination>
      </div>
    </div>
    <AddOrEdit ref="AddOrEdit" @refreshList="getWarehousingList(true)" />
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
import AddOrEdit from './add-or-edit'
export default {
  data () {
    return {
      tableHeight: '',
      searchPost: {
        startTime: '',
        endTime: '',
        warehousingPlanId: '',
      },
      warehousingBelongId: '',
      warehousingBelongName: '',
      pageConfig:{
        pageIndex: 1,
        pageSize: 15,
        totalCount: 0
      },
      tableData: [],
      warehousingStatus: ['计件单待确认', '待品质审批', '待签收', '待erp录入', 'erp录入完成'],
      subsidyStatus: ['待部门主管审批', '待中心主管审批', '待薪酬专员核实', '已发放'],
      addDialogVisible: false,
      authorityLevel: '0'
    };
  },
  components: {
    AddOrEdit,
  },
  mixins: [dingMixin],
  computed: {
    isTime() {
      return this.warehousingBelongId === '1293102120648929281'       //生产部计时（是否为计时模块）
    },
    hasAddAuthority() {
      return this.authorityLevel === '1' || (this.isTime && this.authorityLevel === '4') || (!this.isTime || this.authorityLevel === '2')
    }
  },
  mounted () {
    this.tableHeight = document.documentElement['clientHeight'] - 200
    window.onresize = () => {
      this.tableHeight = document.documentElement['clientHeight'] - 200
    }
    this.getAuthorityAsd();
    this.warehousingBelongId = this.$route.params.subId
    this.warehousingBelongName = this.$route.params.subName
    formUtil.resetData(this.searchPost);
    this.getWarehousingList(true);
  },
  methods: {
    async getAuthorityAsd() {
      let data = await this.$httpN.postB('pc/authority/asd')
      this.authorityLevel = data.userLevel;
    },
    async getWarehousingList(type) {
      if(type) this.pageConfig.pageIndex = 1
      let {list, totalCount} = await this.$httpN.postB(!this.isTime ? 'pc/warehousing/list' : 'pc/subsidy/list',{
        page: this.pageConfig.pageIndex,
        limit: this.pageConfig.pageSize,
        warehousingBelongId: this.warehousingBelongId,
        startTime: this.searchPost.startTime,
        endTime: this.searchPost.endTime,
        fuzzyPlanNum: this.searchPost.warehousingPlanId,
      });
      this.tableData = list
      this.pageConfig.totalCount = totalCount
    },
    currentChangeHandle (val) {
      this.pageConfig.pageIndex = val
      this.getWarehousingList()
    },
    openEditDialog(id, operation) {
      this.addDialogVisible = true
      this.$nextTick(() => {
        this.$refs.AddOrEdit.init(id, this.warehousingBelongId, this.warehousingBelongName, operation);
      })
    },
    async exportData() {
      if(this.isTime) {
        let fileData = await this.$httpN.get('pc/subsidy/export', {
          startTime: this.searchPost.startTime,
          endTime: this.searchPost.endTime
        }, 'blob');
        this.downFile(fileData, this.warehousingBelongName+'计时入库模块数据.xls');
      } else {
        let fileData = await this.$httpN.get('pc/warehousing/export', {
          warehousingBelongId: this.warehousingBelongId,
          startTime: this.searchPost.startTime,
          endTime: this.searchPost.endTime
        }, 'blob');
        this.downFile(fileData, this.warehousingBelongName+'计件入库模块数据.xls');
      }
    },
    downFile(blob, fileName) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(link.href);
      }
    },
    async delData(id) {
      formUtil.submitConfirm('请问您是否确定删除这条记录？', async ()=> {
        if(!await this.$httpN.postB(this.isTime ? 'pc/subsidy/delete' : 'pc/warehousing/delete', {ids: id, warehousingBelongName: this.warehousingBelongName})) return;
        formUtil.submitSuccess('删除成功');
        this.getWarehousingList(true);
      })
    },
  }
}
</script>

<style lang='scss' scoped>
.wrapper {
  height: 100%;
  width: 100%;
  padding: 0 15px;
  .main {
    height: 100%;
    padding: 15px 0;
    .search-bar {
      padding-bottom: 15px;
      display: flex;
      .btn-group {
        margin-left: 10px;
        line-height: 36px;
      }
    }
    .table {
      height: calc(100% - 93px);
      overflow: auto;
    }
    .bottom {
      height: 54px;
      padding: 13px 0;
      display: flex;
      justify-content: space-between;
      .btn-wrapper {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          width: 4px;
          height: 4px;
        }
        &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
          border-radius: 5px;
          background: rgba(0,0,0,0.2);
          scrollbar-arrow-color:red;
        }
        &::-webkit-scrollbar-track {/*滚动条里面轨道*/
          border-radius: 0;
          background: rgba(0,0,0,0.1);
        }
      }
    }
  }
}
</style>